<template>
	<div>
		<el-breadcrumb separator="/" class="registration-list">
		  <el-breadcrumb-item :to="{ path: '/' }">活动列表</el-breadcrumb-item>
		  <el-breadcrumb-item>评论管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="list-title">【{{title}}】</div>
		<div class="order-selected">
			<el-form ref="form" :inline="true" label-width="100px">
                <el-form-item style='width:200px' label="报名人昵称：">
                    <el-input v-model="name" style='width:100px' placeholder='报名人昵称'></el-input>
                </el-form-item>
                <el-form-item style='width:150px' label='渠道:' label-width="50px">
                	<el-select style='width:100px' @change='getPayChannel' v-model="channel" placeholder="微信">
                        <el-option  label="微信" value="weixin"></el-option> 
                        <el-option  label="APP" value="app"></el-option> 
                        <el-option  label="小程序" value="XCX"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评论时间：" style='width:450px'>
                    <el-date-picker
                        v-model="selectDateStart"
                        @change='getStartDate'
                        style='width:150px'
                        placeholder="选择起始时间">
                    </el-date-picker>
                    <el-date-picker
                        v-model="selectDateEnd"
                        @change='getEndDate'
                        style='width:150px'
                        placeholder="选择结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style='position:absolute;right:0px;bottom:0px;'>
                	<el-button type='danger' class='change-btn' @click='handleCleanData'>清空</el-button>
                	<el-button type='primary' class='change-btn' @click='handleSerachData'>查询</el-button>
                </el-form-item>     
            </el-form>
        </div>
        <div style="padding-bottom:10px">
        	<el-button type='primary' class='change-btn' @click='handlePassList'>批量通过</el-button>
            <el-button type='danger' class='change-btn' @click='handleDeleList'>批量删除</el-button>
        </div>
        <el-tabs type="card" @tab-click="handleClick" v-model='activeTab'>
		    <el-tab-pane label="全部" name=' '>
		    	<el-table
			    :data="commentlist"
			    :border='false'
			    tooltip-effect="dark"
			     @selection-change="handleSelectionChange"
			    style="width: 100%">
			    <el-table-column
			      type="selection"
			     >
			    </el-table-column>
			    <el-table-column
			      label="昵称"
			      width='200%'
			     >
			      	<template scope="scope">
			      		<div class="head-img"><img :src="scope.row.headimg" width='60' height='60'/></div>
				      	<div class="name-info">{{ scope.row.username }}</br>{{ scope.row.createdate }}</div>
			  		</template>
			    </el-table-column>
			    <el-table-column
			      label="评论内容"
			      width='360%'
			     >
			      <template scope='scope'>
			      	<p style='font-size:12px;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;'>{{scope.row.connect}}</p>
			      	<div>
			      	<img class="img-item" :src="scope.row.image1" v-if='scope.row.image1!=""&&scope.row.image1!=undefined'/>
					<img class="img-item" :src="scope.row.image2" v-if='scope.row.image2!=""&&scope.row.image2!=undefined'/>
					<img class="img-item" :src="scope.row.image3" v-if='scope.row.image3!=""&&scope.row.image3!=undefined'/>
					<img class="img-item" :src="scope.row.image4" v-if='scope.row.image4!=""&&scope.row.image4!=undefined'/>
					<img class="img-item" :src="scope.row.image5" v-if='scope.row.image5!=""&&scope.row.image5!=undefined'/>
			      	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="状态"
			     >
			      <template scope='scope'>
			      	{{scope.row.statusStr}}
			      </template>
			    </el-table-column>
			    <el-table-column label="操作">
			      <template scope="scope">
			        <router-link :to="{path:'/activity/list/comment_check/'+scope.row.id,query:{activityId:scope.row.actionId}}">
		        		<el-button type="primary" size="small">查看</el-button>
		        	</router-link>
			        <el-button
								v-if='scope.row.statusStr!="已删除"'
			          size="small"
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
		    </el-tab-pane>

		    <el-tab-pane label="待审核" name='0'>
		    	<el-table
			    :data="commentlist"
			    :border='false'
			    tooltip-effect="dark"
			    @selection-change="handleSelectionChange"
			    style="width: 100%">
			    <el-table-column
			      type="selection"
			     >
			    </el-table-column>
			    <el-table-column
			      label="昵称"
			      width='200%'
			     >
			      	<template scope="scope">
			      		<div class="head-img"><img :src="scope.row.headimg" width='60' height='60'/></div>
				      	<div class="name-info">{{ scope.row.username }}</br>{{ scope.row.createdate }}</div>
			  		</template>
			    </el-table-column>
			    <el-table-column
			      label="评论内容"
			      width='320%'
			     >
			      <template scope='scope'>
			      	<p style='font-size:12px;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;'>{{scope.row.connect}}</p>
			      	<div>
			      	<img class="img-item" :src="scope.row.image1" v-if='scope.row.image1!=""&&scope.row.image1!=undefined'/>
					<img class="img-item" :src="scope.row.image2" v-if='scope.row.image2!=""&&scope.row.image2!=undefined'/>
					<img class="img-item" :src="scope.row.image3" v-if='scope.row.image3!=""&&scope.row.image3!=undefined'/>
					<img class="img-item" :src="scope.row.image4" v-if='scope.row.image4!=""&&scope.row.image4!=undefined'/>
					<img class="img-item" :src="scope.row.image5" v-if='scope.row.image5!=""&&scope.row.image5!=undefined'/>
			      	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="状态"
			     >
			      <template scope='scope'>
			      	{{scope.row.statusStr}}
			      </template>
			    </el-table-column>
			    <el-table-column label="操作">
			      <template scope="scope">
			        <router-link :to="{path:'/activity/list/comment_check/'+scope.row.id,query:{activityId:scope.row.actionId}}">
		        		<el-button type="primary" size="small">查看</el-button>
		        	</router-link>
			        <el-button
			          size="small"
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
		    </el-tab-pane>

		    <el-tab-pane label="已通过" name='1'>
		    	<el-table
			    :data="commentlist"
			    :border='false'
			    tooltip-effect="dark"
			    @selection-change="handleSelectionChange"
			    style="width: 100%">
			    <el-table-column
			      type="selection"
			     >
			    </el-table-column>
			    <el-table-column
			      label="昵称"
			      width='200%'
			     >
			      	<template scope="scope">
			      		<div class="head-img"><img :src="scope.row.headimg" width='60' height='60'/></div>
				      	<div class="name-info">{{ scope.row.username }}</br>{{ scope.row.createdate }}</div>
			  		</template>
			    </el-table-column>
			    <el-table-column
			      label="评论内容"
			      width='320%'
			     >
			      <template scope='scope'>
			      	<p style='font-size:12px;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;'>{{scope.row.connect}}</p>
			      	<div>
			      	<img class="img-item" :src="scope.row.image1" v-if='scope.row.image1!=""&&scope.row.image1!=undefined'/>
					<img class="img-item" :src="scope.row.image2" v-if='scope.row.image2!=""&&scope.row.image2!=undefined'/>
					<img class="img-item" :src="scope.row.image3" v-if='scope.row.image3!=""&&scope.row.image3!=undefined'/>
					<img class="img-item" :src="scope.row.image4" v-if='scope.row.image4!=""&&scope.row.image4!=undefined'/>
					<img class="img-item" :src="scope.row.image5" v-if='scope.row.image5!=""&&scope.row.image5!=undefined'/>
			      	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="状态"
			     >
			      <template scope='scope'>
			      	{{scope.row.statusStr}}
			      </template>
			    </el-table-column>
			    <el-table-column label="操作">
			      <template scope="scope">
			        <router-link :to="{path:'/activity/list/comment_check/'+scope.row.id,query:{activityId:scope.row.actionId}}">
		        		<el-button type="primary" size="small">查看</el-button>
		        	</router-link>
			        <el-button
			          size="small"
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
		    </el-tab-pane>

		    <el-tab-pane label="已删除" name='2'>
		    	<el-table
			    :data="commentlist"
			    :border='false'
			    @selection-change="handleSelectionChange"
			    tooltip-effect="dark"
			    style="width: 100%">
			    <el-table-column
			      type="selection"
			     >
			    </el-table-column>
			    <el-table-column
			      label="昵称"
			      width='200%'
			     >
			      	<template scope="scope">
			      		<div class="head-img"><img :src="scope.row.headimg" width='60' height='60'/></div>
				      	<div class="name-info">{{ scope.row.username }}</br>{{ scope.row.createdate }}</div>
			  		</template>
			    </el-table-column>
			    <el-table-column
			      label="评论内容"
			      width='320%'
			     >
			      <template scope='scope'>
			      	<p style='font-size:12px;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;'>{{scope.row.connect}}</p>
			      	<div>
			      	<img class="img-item" :src="scope.row.image1" v-if='scope.row.image1!=""&&scope.row.image1!=undefined'/>
					<img class="img-item" :src="scope.row.image2" v-if='scope.row.image2!=""&&scope.row.image2!=undefined'/>
					<img class="img-item" :src="scope.row.image3" v-if='scope.row.image3!=""&&scope.row.image3!=undefined'/>
					<img class="img-item" :src="scope.row.image4" v-if='scope.row.image4!=""&&scope.row.image4!=undefined'/>
					<img class="img-item" :src="scope.row.image5" v-if='scope.row.image5!=""&&scope.row.image5!=undefined'/>
			      	</div>
			      </template>
			    </el-table-column>
			    <el-table-column
			      label="状态"
			     >
			      <template scope='scope'>
			      	{{scope.row.statusStr}}
			      </template>
			    </el-table-column>
			    <el-table-column label="操作">
			      <template scope="scope">
			        <router-link :to="{path:'/activity/list/comment_check/'+scope.row.id,query:{activityId:scope.row.actionId}}">
		        		<el-button type="primary" size="small">查看</el-button>
		        	</router-link>
			      </template>
			    </el-table-column>
			  </el-table>
		    </el-tab-pane>
		</el-tabs>
		     <div class="block page-pagination">
				<el-pagination
			        :current-page="pageNum"
			        :page-sizes="pageSizes"
			        :page-size="pageSize"
			        @size-change='getPageSizes'
			        @current-change="handleCurrentChange"
			        layout="total, sizes, prev, pager, next"
				    :total="count">
				</el-pagination>
			</div>
		
	</div>
</template>
<script>
	export default {
		data(){
			return {
				name:'',
				id: this.$route.params.id,
				selectDateStart:'',
				selectDateEnd:'',
				status:'',
				title:'',
				checkedlist:[],
				activeTab:' ',
				channel:'weixin',
				commentIds:'',
				pageSizes:[10,15,20],
				pageNum:1,
				commentlist:[],
				pageSize:10,
				count:0
			}
		},

		methods:{
			handleCleanData(){
				this.name = ''
				this.selectDateStart = ''
				this.selectDateEnd = ''
				window.sessionStorage.removeItem('ticname')
				window.sessionStorage.removeItem('searchData2')
				window.sessionStorage.removeItem('searchData1')
				this.getActivityData()
			},

			getPageSizes(size){
				this.pageSize = size;
				this.getActivityData()
			},

			handleCurrentChange(size){
				this.pageNum = size;
				this.getActivityData()
			},

			handleSelectionChange(val){
				this.checkedlist = val
			},

			handlePassList(){
				if (this.checkedlist.length>0) {
				
				this.$confirm('确定要批量通过评论?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
		        for (let i = 0; i < this.checkedlist.length; i++) {
					this.commentIds += this.checkedlist[i].id+','
				}
		        	this.$http.post('marketweb/commentback/batchupdatestatus',{
		        		keyAdmin:this.$store.state.keyAdmin,
		        		commentIds:this.commentIds.slice(0,-1),
		        		status:1
		        	}).then(response=>{
		        		if(response.body.code==200){
		        			this.$message({
				            type: 'success',
				            message: '操作成功!'
				          });
		        			this.getActivityData()
		        		}else{
		        			this.$message.error(response.body.msg)
		        		}
		        	},response=>{
		        		this.$message.error('批量操作失败')
		        	})
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消操作'
		          });          
		        });
		    }else{
		    	this.$message.error('请选择要通过的订单')
		    }
		    this.commentIds = ''
			},

			handleDeleList(){
				if (this.checkedlist.length>0) {
					
				this.$confirm('确定要批量删除评论?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
		        	for (let i = 0; i < this.checkedlist.length; i++) {
					this.commentIds += this.checkedlist[i].id+','
				}
		        	this.$http.post('marketweb/commentback/batchupdatestatus',{
		        		keyAdmin:this.$store.state.keyAdmin,
		        		commentIds:this.commentIds.slice(0,-1),
		        		status:2
		        	}).then(response=>{
		        		if(response.body.code==200){
		        			this.$message({
				            type: 'success',
				            message: '操作成功!'
				          });
		        			this.getActivityData()

		        		}else{
		        			this.$message.error(response.body.msg)
		        		}
		        	},response=>{
		        		this.$message.error('批量操作失败')
		        	})
		          
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消操作'
		          });          
		        });
			    }else{
			    	this.$message.error('请选择要删除的订单')
			    }

			    this.commentIds = ''
			},

			getActivityData(){
				this.$http.post('marketweb/commentback/queryComment',{
					keyAdmin:this.$store.state.keyAdmin,
					actionId:this.id,
					status:this.status,
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					channel:this.channel,
					createDateStart:this.selectDateStart,
					createDateEnd:this.selectDateEnd,
					username:this.name
				}).then(response=>{
					if(response.body.code ==200){
						this.commentlist = response.body.commentlist
						this.count = response.body.count
						this.title = response.body.title
					}else{
						this.$message.error(response.body.msg)
					}
				},response=>{
					this.$message.error('获取评论列表失败')
				})
			},

			handleClick(tab,event){
				if (event.target.innerHTML == '已通过') {
					this.status = 1
				}else if(event.target.innerHTML == '已删除'){
					this.status = 2
				}else if(event.target.innerHTML == '待审核'){
					this.status = 0
				}else if(event.target.innerHTML == '全部'){
					this.status = ''
				} 
				window.sessionStorage.commentType = this.activeTab
				this.getActivityData()
			},

			getStartDate(val){
				this.selectDateStart = val
			},

			getPayChannel(val){
				this.channel = val
			},

			getEndDate(val){
				this.selectDateEnd = val
			},

			handleDelete(index,row){
				 this.$confirm('确定要删除此评论?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		           this.$http.post('marketweb/commentback/updatestatus',{
						keyAdmin:this.$store.state.keyAdmin,
						commentId:row.id,
						status:2
					}).then(response=>{
						if(response.body.code == 200){
						  this.$message({
				            type: 'success',
				            message: '删除成功!'
				          });
				          this.getActivityData()
						}else{
							this.$message.error(response.body.msg)
						}
					},response=>{
						this.$message.error('删除失败')
					})
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
			},

			handleSerachData(){
				window.sessionStorage.searchData1 = this.selectDateStart,
				window.sessionStorage.searchData2 = this.selectDateEnd,
				window.sessionStorage.ticname = this.name
				this.getActivityData()
			}
		},

		beforeRouteEnter(to,from,next){
			next(vm=>{
				if(from.name=='CommentCheck'){
					vm.activeTab = window.sessionStorage.commentType ? window.sessionStorage.commentType : ' ',
					vm.selectDateStart = window.sessionStorage.searchData1 ? window.sessionStorage.searchData1:''
					vm.selectDateEnd = window.sessionStorage.searchData2 ? window.sessionStorage.searchData2:''
					vm.name = window.sessionStorage.ticname ? window.sessionStorage.ticname : ''
					if(vm.activeTab == ' '){
						vm.status = ''
					}else{
						vm.status = vm.activeTab
					}
					vm.getActivityData()
				}else{
					window.sessionStorage.removeItem('ticname')
					window.sessionStorage.removeItem('searchData2')
					window.sessionStorage.removeItem('searchData1')
					window.sessionStorage.removeItem('commentType')
					vm.getActivityData()
				}
			})


		}
	}
</script>

<style scoped>
	.registration-list{
		padding:10px 0;
		margin-bottom:10px;
		border-bottom:1px solid #569efe;
		font-size: 16px;
		color: #569efe;
	}
	.head-img{
		width: 40px;
		height: 40px;
		display: inline-block;
		border-radius: 50%;
		margin-top: 5px;
		overflow: hidden;
	}
	.img-item{
		width: 40px;
		height: 40px;
		border-radius: 4px;
		margin-right:5px;
		margin-bottom: 5px;
	}
	.list-title{
		margin:12px -8px;
		font-size: 16px;
		color: #999;
	}
	.name-info{
		color: #888;
		display: inline-block;
		font-size: 12px;
	}
	.change-btn{
		padding:8px 10px;
	}
	.order-selected{
		padding-top: 10px;
		margin: 10px 0;
		position: relative;
		background: #eee;
	}
	.el-form-item{
   		margin-bottom: 6px;
  	}
	.page-pagination{
		min-width: 380px;
		float: right;
	}
</style>